<template>
  <div>
    <van-nav-bar title="爬楼费设置" left-text="返回" left-arrow v-back />
    <van-cell-group>
      <van-cell title="类型">
        <van-radio-group v-model="radio" @change="typeChange" style="display: flex;justify-content: space-between;">
          <van-radio name="1">楼梯房</van-radio>
          <van-radio name="2">电梯房</van-radio>
        </van-radio-group>
      </van-cell>
      <span v-show="radio == '1'">
        <van-field v-model="obj1.price" @focus="focusPrice('obj1')" label="1-3楼" class="palou-item">
          <van-button slot="button" size="small">元/每桶</van-button>
          <van-checkbox slot="button" v-model="obj1.checked"></van-checkbox>
        </van-field>
        <van-field v-model="obj2.price" @focus="focusPrice('obj2')" label="4楼" class="palou-item">
          <van-button slot="button" size="small">元/每桶</van-button>
          <van-checkbox slot="button" v-model="obj2.checked"></van-checkbox>
        </van-field>
        <van-field v-model="obj3.price" @focus="focusPrice('obj3')" label="5楼" class="palou-item">
          <van-button slot="button" size="small">元/每桶</van-button>
          <van-checkbox slot="button" v-model="obj3.checked"></van-checkbox>
        </van-field>
        <van-field v-model="obj4.price" @focus="focusPrice('obj4')" label="6楼" class="palou-item">
          <van-button slot="button" size="small">元/每桶</van-button>
          <van-checkbox slot="button" v-model="obj4.checked"></van-checkbox>
        </van-field>
        <van-field v-model="obj5.price" @focus="focusPrice('obj5')" label="7楼" class="palou-item">
          <van-button slot="button" size="small">元/每桶</van-button>
          <van-checkbox slot="button" v-model="obj5.checked"></van-checkbox>
        </van-field>
        <van-field v-model="obj6.price" @focus="focusPrice('obj6')" label="8楼以上" class="palou-item">
          <van-button slot="button" size="small">元/每桶</van-button>
          <van-checkbox slot="button" v-model="obj6.checked"></van-checkbox>
        </van-field>
      </span>
      <!-- <van-cell title="类型">
        <van-radio-group v-model="radio" @change="typeChange" style="display: flex;justify-content: space-between;">
          <van-radio name="1">楼梯房</van-radio>
          <van-radio name="2">电梯房</van-radio>
        </van-radio-group>
      </van-cell> -->
      <span v-show="radio == '2'">
        <van-field v-model="name" label="楼层数" clearable v-validate="'required'" data-vv-name="楼层数"
          :error-message="errors.first('楼层数')" placeholder="请输入楼层数" required maxLength="300" />
        <van-field v-model="price" label="价格" clearable v-validate="'required|price'" data-vv-name="价格"
          :error-message="errors.first('价格')" placeholder="请输入价格" required />
        <!-- <van-field v-model="stock" label="库存" clearable v-validate="'required'" data-vv-name="库存"
          :error-message="errors.first('库存')" placeholder="请输入库存" required /> -->
      </span>
      <van-field v-model="detail" label="描述" clearable v-validate="'required'" data-vv-name="描述"
        :error-message="errors.first('描述')" type="textarea" rows="5" required />
    </van-cell-group>
    <van-button class="bottom-btn" size="large" @click="save" type="info">保存</van-button>
  </div>
</template>

<script>
  import {
    PRODUCT_ADD,
    PRODUCT_DEL
  } from '@/api/product'
  import {
    mapState
  } from 'vuex'
  import axios from 'axios'
  export default {
    data() {
      return {
        radio: '1',
        obj1: {
          price: '',
          checked: false,
          name: '1-3楼',
          key: '【楼梯房】1-3楼'
        },
        obj2: {
          price: '',
          checked: false,
          name: '4楼',
          key: '【楼梯房】4楼'
        },
        obj3: {
          price: '',
          checked: false,
          name: '5楼',
          key: '【楼梯房】5楼'
        },
        obj4: {
          price: '',
          checked: false,
          name: '6楼',
          key: '【楼梯房】6楼'
        },
        obj5: {
          price: '',
          checked: false,
          name: '7楼',
          key: '【楼梯房】7楼'
        },
        obj6: {
          price: '',
          checked: false,
          name: '8楼以上',
          key: '【楼梯房】8楼以上'
        },
        verify: '',
        editId: '',
        name: '',
        price: 0,
        stock: 10000,
        detail: '楼梯房爬楼费是给送水师傅的辛苦费，送水辛苦，生活不易，感谢您的理解与支持',
        detailInfo: {
          1: '楼梯房爬楼费是给送水师傅的辛苦费，送水辛苦，生活不易，感谢您的理解与支持',
          2: '电梯房因为有电梯，是没有爬楼费的，欢迎大家多多订购'
        },
        nameInfo: {
          1: 1,
          2: '全部'
        },
        list: []
      }
    },
    computed: {
      ...mapState(['stationInfo']),
    },
    mounted() {
      this.init()
    },
    methods: {
      focusPrice(objStr) {
        this[objStr].checked = true
      },
      init() {
        this.$reqPost('/product/getProductList', new URLSearchParams({
          stationId: this.stationInfo.id,
          own: 1,
          deliver: 1
        })).then(res => {
          this.list = res.rows
          res.rows.forEach(el => {
            for (let i = 1; i <= 6; i++) {
              if (el.name === this['obj' + i].key) {
                this['obj' + i].price = el.price
                this['obj' + i].checked = true
                this.$set(this['obj' + i], 'id', el.id)
                this.$set(this['obj' + i], 'verify', el.verify)
              } else if(el.name.indexOf('电梯房') > -1) {
                this.price = el.price
                this.stock = el.stock
                this.detail = el.description
                this.editId = el.id
                this.verify = el.verify
              }
            }
          })
        })
      },
      typeChange() {
        if (this.detail === '') {
          this.detail = this.detailInfo[this.radio]
        }
        this.name = this.nameInfo[this.radio]
      },
      save() {
        if (this.radio == 2) {
          if (this.verify == 2) {
            this.$toast('电梯房正在审核中，不能保存');
            return false;
          }
          this.$validator.validateAll().then((result) => {
            if (result) {
              let param = {
                name: `【${this.radio == 1 ? '楼梯房' : '电梯房'}专用】 ${this.name}楼`,
                description: this.detail,
                price: this.price,
                stationId: this.stationInfo.id,
                own: 1,
                stock: parseInt(this.stock),
                deliver: 1,
                id: this.editId
              }
              this.$reqPost(PRODUCT_ADD, param).then(res => {
                this.$router.go(-1);
                this.$toast('保存成功');
              }).catch(err => {
                this.$toast('保存失败');
              })
            }
          });
        } else {
          for (let i = 1; i <= 6; i++) {
            if (i === 1) {
              if (!this['obj' + i].checked && !this['obj' + i].id) {
                this.$toast('1-3楼的爬楼费必须选择')
                return false
              } 
            }
            if (this['obj' + i].checked && this['obj' + i].verify == 2) {
              this.$toast(this['obj' + i].name + '正在审核中，请勿勾选修改')
              return false
            } 
          }
          let count = []
          let delList = []
          for (let i = 1; i <= 6; i++) {
            if (this['obj' + i].checked) {
              if (!this['obj' + i].price) {
                this.$toast('请输入' + this['obj' + i].name + '的价格');
                return false;
              }
              let param = {
                name: `【楼梯房】${this['obj' + i].name}`,
                description: this.detail,
                price: `${this['obj' + i].price}`,
                stationId: this.stationInfo.id,
                own: 1,
                stock: 10000,
                deliver: 1,
                id: this['obj' + i].id
              }
              count.push(this.$reqPost(PRODUCT_ADD, param))
            }
          }
         
          if (count.length !== 0) {
            axios.all(count).then(axios.spread(() => {
              this.$router.go(-1);
              this.$toast('保存成功');
            })).catch(err => {
              this.$toast('保存失败');
            })
          } else {
            this.$toast('请配置爬楼费');
          }
        }
      },
    }
  }

</script>

<style lang="less">
  .palou-item {
    input {
      margin-left: 60px;
      margin-right: 10px;
    }
    .van-field__control {
      border: 1px solid #ddd;
      padding: 4px;
    }
    .van-field__button {
      display: flex;

      button {
        margin-right: 10px;
      }
    }
  }

</style>
